<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tab {
        background: #eee;
        color: #000;
        padding: 5px;
        margin: 5px;
        border-radius: 5px;
      }
      .active {
        background: red;
        color: white;
        padding: 5px;
        margin: 5px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>v-model 双向数据绑定指令：一般使用在表单元素上</h1>

      <input type="text" v-model="msg" />
      <hr />
      <!-- {{}} 模版解析 可以解析data中的资源 -->
      <h1>第一：模版语法：{{msg}}</h1>

      <!-- v-for 指令循环 点击 任意一个，都能弹出当前的下标和内容 
      v-on:click="handleClick(index, item)"
      简写版本：@click="handleClick(index, item)"
      -->
      <h1>第二：v-if/v-else /v-for / v-on:click</h1>
      <ul>
        <li v-for="(item, index) in list" v-on:click="handleClick(index, item)">
          <span v-if="index % 2">下标：{{index}} ：{{item.city}}</span>
          <span v-else>我是代替的内容</span>
        </li>
      </ul>

      <!--  v-bind:class 动态绑定 
      v-bind:class动态绑定class的时候，如果是三元运算，不需要加 {}  
      v-bind:class="item.flag?'active': ''"

      简写为 :class
      -->
      <h1>第三：v-bind/ v-bind:class=""</h1>
      <ol>
        <li v-for="(item, index) in list" v-bind:class="item.flag ? 'active': ''" v-on:click="handleClick(index, item)">
          <span>下标：{{index}} ：{{item.city}}</span>
        </li>
      </ol>

      <!-- tab切换案例 -->

      <!--  v-html: 就是渲染 带标签的html元素 -->

      <h1>第四：v-html: / :class / v-for / @click</h1>
      <div class="tab-header">
        <span
          class="tab"
          :class="tabIndex === index ? 'active' : ''"
          v-for="(item, index) in list"
          @click="handleTabClick(index)"
        >
          {{item.city}}
        </span>
      </div>
      <ul class="tab-content">
        <li v-for="item in  list[tabIndex].children" v-html="item.count">{{item.count}}</li>
      </ul>
      <hr />
      <h1>第五：v-text:</h1>
      <h2 v-text="msg"></h2>
    </div>

    <!-- vue2 版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      /*
      v-
       v-for        指令循环
       v-if v-else  指令判断
       v-show       指令判断显示隐藏
       v-bind
       v-on
       v-model   
       v-html 
       v-text 
      */
      // vue构造函数
      const app = new Vue({
        el: '#root',
        // data 对象形式。以后函数形式
        data: {
          tabIndex: 0,
          flag: false,
          msg: 'hello world',
          list: [
            {
              id: 1,
              city: '上海',
              flag: false,
              children: [
                {
                  id: '1-1',
                  count: '奉贤区',
                },
                {
                  id: '1-2',
                  count: '松江区',
                },
                {
                  id: '1-3',
                  count: '浦东区',
                },
              ],
            },
            {
              id: 2,
              city: '北京',
              flag: false,
              children: [
                {
                  id: '2-1',
                  count: '海淀区',
                },
                {
                  id: '3-2',
                  count: '<h1>丰台区</h1>',
                },
                {
                  id: '4-3',
                  count: '朝阳区',
                },
              ],
            },
            // {
            //   id: 3,
            //   city: '重庆',
            //   flag: false,
            // },
            // {
            //   id: 4,
            //   city: '天津',
            //   flag: false,
            // },
          ],
        },
        // 所有的方法都放置区域
        methods: {
          // tab切换的函数
          handleTabClick(index) {
            this.tabIndex = index
          },

          handleClick(index, item) {
            // 点击的时候，切换每一个数据的状态
            item.flag = !item.flag
            // 弹出当前的下标 内容
            // alert(`index:${index}, ${item.city}`)
          },
        },
      })

      console.log(app, 'app')
    </script>
  </body>
</html>
